<template>
  <div class="create-enterprise">
    <layout-header />
    <div class="create-enterprise-main">
      <div class="create-enterprise-container" v-loading="pageLoading">
        <div class="create-enterprise-header">
          <h1>请完善企业信息</h1>
        </div>
        <div class="create-enterprise-form">
          <enterprise-info-form ref="formCom" />
        </div>
        <div class="create-enterprise-footer">
          <el-button type="primary" class="create-enterprise-next" @click="next">下一步</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import LayoutHeader from '@/components/Layout/header.vue'
import EnterpriseInfoForm from './system/information/form.vue'
import api from '@/http/index'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import useUserStore from '@/stores/user'
import { Role_Center_Host, Role_Enum } from '@/common/enum'
const formCom = ref()
const pageLoading = ref(false)
const userStore = useUserStore()

const next = async () => {
  formCom.value
    .submit()
    .then(async (data) => {
      pageLoading.value = true
      const result = await api.enterprise.create(data)
      const enterprise = result?.data || {}
      if (!enterprise.enterpriseId) return ElMessage.error('创建企业失败')
      const bindResult = await api.user.bindEnterprise({
        enterpriseId: enterprise.enterpriseId,
        userId: userStore.user.userId,
      })
      if (!bindResult.data) return ElMessage.error('绑定企业失败')
      ElMessage.success('创建企业成功')
      pageLoading.value = false
      location.href = Role_Center_Host[Role_Enum.enterprise_boss]
    })
    .catch(() => {
      ElMessage.error('创建企业失败，请稍后重试')
      pageLoading.value = false
    })
}
</script>

<style lang="scss">
.create-enterprise {
  width: 100%;
  background-color: #f5f5f5;
  height: 100vh;
  overflow-y: scroll;
  &-main {
    width: 100%;
    min-height: calc(100vh - 76px);
    padding: 28px 0;
  }
  &-container {
    position: relative;
    width: 928px;
    margin: 0 auto;
    background-color: #fff;
    box-shadow:
      0 12px 32px 12px rgba(0, 0, 0, 0.03),
      0 9px 24px 0 rgba(0, 0, 0, 0.05),
      0 6px 16px -8px rgba(0, 0, 0, 0.08),
      0 2px 8px -4px rgba(32, 97, 230, 0.1);
  }
  &-header {
    width: 100%;
    padding: 24px;
    padding-bottom: 0;
    > h1 {
      color: #262626;
    }
  }
  &-form {
    padding: 24px;
  }
  &-footer {
    display: flex;
    align-items: center;
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 12px 24px;
    height: 64px;
    background: #fff;
  }
  &-next {
    width: 100%;
    height: 100%;
    font-size: 16px;
  }
}
</style>
